<template>
  <div>
    <!-- 加载动画 -->
    <loading
      v-show="isLoading"
      style="width: 20%; height: 20%; position: relative; left: 40%"
    />
    <div v-show="!isLoading">
      <!-- 头部:简介+图片 -->
      <div class="details">
        <ul class="left">
          <li>工艺品名：</li>
          <li>作<span class="space">者：</span></li>
          <li>类<span class="space">型：</span></li>
          <li>材<span class="space">质：</span></li>
          <li>工艺指数：</li>
          <li>更新时间：</li>
        </ul>
        <ul class="right">
          <li>{{ worksInfos.worksName }}</li>
          <li>{{ worksInfos.auther }}</li>
          <li>{{ worksInfos.worksType }}</li>
          <li>{{ worksInfos.worksMaterial }}</li>
          <li>
            <el-rate
              v-model="worksInfos.worksScore"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
          </li>
          <li class="time">{{ worksUpdate }}</li>
        </ul>
        <!-- 图片 -->
        <works-pic class="workspic" :worksId="worksId" ref="pics" />
      </div>
      <p
        style="
          position: absolute;
          right: 4rem;
          font-size: 1.1em;
          font-weight: bold;
          letter-spacing: 1px;
        "
      >
        点赞数：<span style="color: #ebba33">{{ worksInfos.worksLike }}</span>
      </p>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 点赞收藏 -->
      <div class="buttons">
        <el-button
          :class="[
            'css-button-3d--red',
            isLiked ? 'el-icon-s-opportunity' : 'el-icon-thumb',
          ]"
          @click="like"
        >
          喜 欢</el-button
        >
        <el-button
          :class="[
            'css-button-3d--yellow',
            isCollected ? 'el-icon-star-on' : 'el-icon-star-off',
          ]"
          @click="collect"
        >
          收 藏</el-button
        >
      </div>
      <!-- 简介、工艺流程 -->
      <el-collapse v-model="activeNames">
        <el-collapse-item title="工艺简介 CraftsProfile" name="1">
          <div>
            {{ worksInfos.worksProfile }}
          </div>
        </el-collapse-item>
        <el-collapse-item title="工艺流程 CraftsProcessing" name="2">
          <div>
            {{ worksInfos.worksProcess }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import Loading from "../loaders/Loading.vue";
import WorksPic from "./WorksPic.vue";
export default {
  components: { WorksPic, Loading },
  name: "PicDetail",
  props: ["worksId"],
  data() {
    return {
      isLiked: false,
      isCollected: false,
      activeNames: ["1"],
      worksInfos: {},
      isLoading: true,
    };
  },
  computed: {
    worksUpdate: {
      get() {
        return this.timestampToDate();
      },
    },
  },
  methods: {
    like() {
      const h = this.$createElement;
      this.isLiked = !this.isLiked;
      if (this.isLiked == true) {
        this.$notify({
          title: "点赞成功",
          message: h("n", { style: "color: #ec7144" }, "感谢你的喜欢！"),
          offset: 100,
          duration: 3000,
          type: "success",
          showClose: false,
        });
      } else {
        this.$notify.info({
          title: "取消点赞成功",
          message: h("n", { style: "color: teal" }, "我们会继续努力的！"),
          offset: 100,
          duration: 3000,
          showClose: false,
        });
      }
    },
    collect() {
      this.isCollected = !this.isCollected;
      if (this.isCollected == true) {
        this.$notify({
          title: "收藏成功",
          offset: 100,
          duration: 3000,
          type: "success",
          showClose: false,
        });
      } else {
        this.$notify.info({
          title: "取消收藏",
          offset: 100,
          duration: 3000,
          showClose: false,
        });
      }
    },
    getWorksInfo() {
      this.isLoading = true;
      this.$axios({
        url: "/works/worksDetails",
        params: { worksId: this.worksId },
      })
        .then((res) => {
          //   console.log(res.data.data);
          this.$refs.pics.getPics();
          this.isLoading = false;
          this.worksInfos = res.data.data;
        })
        .catch(() => {
          this.$message.warning("请求失败");
        });
    },
    timestampToDate(timestamp) {
      timestamp = this.worksInfos.updateTime;
      let now = new Date(timestamp),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      return (
        y +
        "-" +
        (m < 10 ? "0" + m : m) +
        "-" +
        (d < 10 ? "0" + d : d) +
        " " +
        now.toTimeString().substr(0, 5)
      );
    },
  },
};
</script>

<style lang="less" scoped>
.details {
  display: flex;
}

li {
  margin-top: 1.2rem;
  display: block;
  text-align: center;
  letter-spacing: 1px;
  font-size: 0.9em;
}
.left {
  width: 10%;
  li {
    background-color: #e9e9e9;
    color: #f57c50;
    font-weight: bold;
    padding: 3px 0 3px 5px;
    border-radius: 5px;
    .space {
      margin-left: 2em;
    }
  }
}
.right {
  width: 18%;
  margin-left: 0.5rem;
  li {
    border-bottom: dashed 1px #ddd;
    color: #333;
    padding: 2.5px;
    font-weight: bold;
  }
  .time {
    font-size: 1em;
  }
}
// 工艺图片轮播图
.workspic {
  width: 71%;
  margin-left: 1rem;
}

.buttons {
  display: flex;
  justify-content: end;
  position: relative;
  top: -1rem;
  right: 1rem;
}
.css-button-3d--red {
  min-width: 80px;
  height: 30px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #ef4823;
  box-shadow: 0 5px #d90429;
}
.css-button-3d--red:hover {
  box-shadow: 0 3px #d90429;
  top: 1px;
}
.css-button-3d--red:active {
  box-shadow: 0 0 #d90429;
  top: 5px;
}

.css-button-3d--yellow {
  min-width: 80px;
  height: 30px;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #ffd04b;
  box-shadow: 0 5px #caab11;
}
.css-button-3d--yellow:hover {
  box-shadow: 0 3px #caab11;
  top: 1px;
}
.css-button-3d--yellow:active {
  box-shadow: 0 0 #caab11;
  top: 5px;
}
</style>
